<template>
    <div>
        <ul class="tab">
            <li v-for="(item,index) in tabList" :key="index" @click="tabIndex = index" :class="{'li-active' : index == tabIndex }">{{item}}</li>
        </ul>
        <template v-if="tabIndex == 0">
            <div class="attr-content-box">
                <h2>元件设置</h2>
                <el-form label-position="right" label-width="75px">
                    <el-form-item label="导航名称">
                        <el-input size="small" placeholder="请输入内容" v-model="attributes.text.t"></el-input>
                        <el-checkbox v-model="attributes.text.s">隐藏</el-checkbox>
                    </el-form-item>

                    <el-form-item label="文字样式">
                        <el-radio-group v-model="attributes.text.d">
                            <el-radio :label="false">默认</el-radio>
                            <el-radio :label="true">自定义</el-radio>
                        </el-radio-group>
                        <CustomText :text="attributes.text" v-if="attributes.text.d"/>
                    </el-form-item>

                </el-form>
            </div>
        </template>
        <template v-if="tabIndex == 1">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="模块背景">
                    <el-radio-group v-model="attributes.base.bg">
                        <el-radio :label="1">默认</el-radio>
                        <el-radio :label="2">隐藏</el-radio>
                        <el-radio :label="3">自定义</el-radio>
                    </el-radio-group>
                    <div v-if="attributes.base.bg==3">
                        <div class="center">定义类型：
                            <el-select v-model="attributes.base.bt" placeholder="请选择" size="small" style="width: 150px">
                                <el-option label="颜色填充" :value="1"></el-option>
                                <el-option label="背景图片" :value="2"></el-option>
                            </el-select>
                        </div>
                        <div class="center" v-if="attributes.base.bt==1">背景颜色：<el-color-picker v-model="attributes.base.bc" size="small"></el-color-picker></div>
                        <div class="center" v-if="attributes.base.bt==2">背景图片：
                            <div class="upload show-img" v-if="attributes.base.bi">
                                <i class="el-icon-close" @click.stop="attributes.base.bi=''"></i>
                                <img :src="attributes.base.bi" alt="">
                            </div>
                            <UploadImg v-else @change="changeBaseBi"/>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            tabList:['基础设置','样式设置'],
            tabIndex: 0,
        }
    },
    
    computed:{
		...mapState(['pageList','pageOnlyId']),
        attributes(){
            return this.pageList[this.util.findIndex(this.pageList,this.pageOnlyId)].controls[0]
        }
    },
    methods: {
        changeBaseBi(img){
            this.attributes.base.bi = img;
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/attr.scss';
</style>

